<h1>头部组件</h1>
<div [title] = "myname" style="width: 100%;text-align: left;">
    <h1>1.数据绑定</h1>
    <div>我的名字是：{{myname}}</div>
</div>
<div style="width: 100%;text-align: left;">
    <h1>2.绑定属性</h1>
    <div [id]=id >绑定id</div>
</div>
<div style="width: 100%;text-align: left;">
    <h1>3.1数据循环</h1>
    <ul>
        <li *ngFor="let item of list"> {{item}} </li>
    </ul>
    <h1>3.2数据循环附带key</h1>
    <ul>
        <li *ngFor="let item of list;let i = index"> {{item}} is {{i}} </li>
    </ul>
</div>
<div style="width: 100%;text-align: left;">
    <h1>4.*ngIf</h1>
    <div *ngIf="list.length >= 3">list为不小于3的数组</div>
    <div *ngIf="list.length < 3">list为小于3的数组</div>
</div>
<div style="width: 100%;text-align: left;">
    <h1>4.*ngSwitch</h1>
    <ul [ngSwitch]="switchlist">
        <li *ngSwitchCase="1">已支付</li>
        <li *ngSwitchCase="2">订单已确认</li>
        <li *ngSwitchCase="3">已发货</li>
        <li *ngSwitchDefault>未定义</li>
    </ul>
</div>
<div style="width: 100%;text-align: left;">
    <h1>5.执行事件</h1>
    <button (click)="addnum()">增加</button><div> ||</div>
    <button (click)="getnum()">查看</button>
</div>
<div style="width: 100%;text-align: left;">
    <h1>6.引入图片</h1>
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
</div>
<div style="width: 100%;text-align: left;">
    <h1>7.ngclass、ngstyle</h1>
    <div [ngStyle]="{'width':'300px','height':'200px','background-color':'blue'}" [ngClass]="{'new_class':true}"></div>
</div>
<div style="width: 100%;text-align: left;">
    <h1>8.管道</h1>
    <div>{{today | date:'yyyy-MM-dd HH:mm' }}</div>
</div>
